import React, {useMemo, useRef} from "react";
import { Space } from "antd";

import ProTable, { TableType, IProTableRef } from "vendor/components/pro-table-native";
import { useThemeToken } from "@/constants";

import { getDataAction, CreateOrEdit, filterItems } from './proTableDriver';
import { RespDataType } from '../api';
import AccountStatus from './AccountStatus';
import { InitAdminBtn, AuthSecretKeyBtn, AuthReportBtn } from "./btns";

const List: React.FC = () => {
    const { themeToken } = useThemeToken();
    const proTableRef = useRef<IProTableRef>();
    const columns = useMemo(() => getColumns(), []);

    return <ProTable
        ref={proTableRef}
        dataAction={getDataAction(proTableRef)}
        rowKey={"accountId"}
        theme={themeToken.proTableToken}
        headerProps={{
            operatorProps: {
                btnList: [
                    {innerType: "create"},
                    {innerType: "edit"},
                    {innerType: "delete"}
                ],
                createOrEditProps: {
                    modalProps:{
                        width: "40%"
                    },
                    CreateOrEditContent:CreateOrEdit,
                    getModalTitle: (rowKey) => rowKey ? "编辑账户" : "创建账户",
                },
            },
            filterProps:{
                maxWidth: "30%",
                filterItems
            }
        }}
        contentProps={{
            tableProps: {
                columns,
            }
        }}
        onError={(msg) => console.error(msg)}
    />

}

export default List;

const getColumns = () => {

    const columns: TableType.ColumnsType<RespDataType.AccountItem> = [
        {
            title: '公司名称',
            dataIndex: 'accountName',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (value, record) => <AccountStatus accountId={record.accountId} status={value}/>
        },
        {
            title: '联系人',
            dataIndex: 'linkman',
            render: (value) => value || "-",
        },
        {
            title: '联系人电话',
            dataIndex: 'phone',
            render: (value) => value || "-",
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
        {
            title: "操作",
            render: (value, record) => <Space>
                <InitAdminBtn accountId={record.accountId} />
                <AuthSecretKeyBtn accountId={record.accountId} />
                <AuthReportBtn accountId={record.accountId} />
            </Space>
        }
    ];

    return columns;
}
